<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>商城首页</title>
    <!-- Theme CSS -->
    <link type="text/css" href="/css/theme.css" rel="stylesheet">
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
    <div class="container">
        <!-- 用户信息 -->
        <h5 class="heading h4 text-white strong-400">
            世纪末的架构师
        </h5>
        <!-- 头部菜单 -->
        <div class="navbar-collapse offcanvas-collapse" id="navbar_main">
            <ul class="navbar-nav ml-auto align-items-lg-center">
                <li class="nav-item">
                    <a class="nav-link text-white" href="home.html">商城首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="/goods/toList">秒杀商品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="./introduction.html">个人中心</a>
                </li>
                <!-- 登录按钮，当用户处于登录状态时隐藏 -->
                <li class="nav-item" id="login-btn">
                    <a href="/login/toLogin" class="btn btn-sm bg-white d-none d-lg-inline-flex">登录</a>
                </li>
                <li class="nav-item" id="register-btn">
                    <a href="/login/toLogin" class="btn btn-sm bg-white d-none d-lg-inline-flex">注册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-icon text-white" href="https://gitee.com/dream-flight" target="_blank">
                        <i class="fab fa-github"></i>
                        <span class="ml-2 d-lg-none">Gitee</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<main class="main">
    <!-- 首页Banner -->
    <section class="spotlight bg-size--cover"
             style="background: url('/image/project/front/backgrounds/img-5.jpg') center center / cover no-repeat; height: calc(60vh)">
        <span class="mask bg-gray-dark alpha-4"></span>
        <div class="spotlight-holder py-sm pt-lg-lg" style="height: 100%;">
            <div class="row cols-xs-space cols-sm-space cols-md-space align-items-center justify-content-around"
                 style="height: 80%">
                <div class="col-lg-auto text-center">
                    <h2 class="heading h1 text-white strong-400">
                        基于SpringBoot的Java秒杀系统
                    </h2>
                </div>
            </div>
        </div>
    </section>
    <!-- 秒杀商品容器 -->
    <section class="slice" >
        <div class="container">
            <div class="mb-md text-center">
                <h3 class="heading h3">
                    今日秒杀商品
                </h3>
                <div class="fluid-paragraph text-center mt-4">
                    <p class="lead lh-180">钜惠惊喜不断，不要错失良机</p>
                </div>
            </div>
            <!-- 今日秒杀商品 -->
            <div class="row cols-xs-space cols-sm-space cols-md-space">
                <!-- 单件秒杀商品 -->
                <div class="col-lg-3">
                    <div class="card">
                        <input id="goodsId" type="hidden">
                        <img src="/image/upload/iphone12.png" height="190">
                        <div class="card-body text-center">
                            <h3 class="heading h5 mb-1">
                                <span class="d-block">iPhone 12</span>
                                <small class="text-muted">iPhone 12 128G 暗夜黑</small>
                            </h3>
                            <del><strong class="d-block">原价：¥5599</strong></del>
                            <p class="mt-2" style="font-size: 16px">
                                <strong>秒杀价：</strong>
                                <strong style="color: red">¥998</strong>
                            </p>
                            <button onclick="toDetail()" class="btn btn-sm btn-primary">
                                点击查看
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card">
                        <img src="/image/project/front/prv/team-2.jpg"
                             class="card-img-top">
                        <div class="card-body text-center">
                            <h3 class="heading h5 mb-1">
                                <span class="d-block">David Wally</span>
                                <small class="text-muted">UI/UX Designer</small>
                            </h3>
                            <p class="mt-2">Design at Webpixels, creator of Boomerang.</p>
                            <a href="https://instagram.com/extrabright" target="_blank" class="btn btn-sm btn-primary">View
                                on Instagram</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card">
                        <img src="/image/project/front/prv/team-2.jpg"
                             class="card-img-top">
                        <div class="card-body text-center">
                            <h3 class="heading h5 mb-1">
                                <span class="d-block">David Wally</span>
                                <small class="text-muted">UI/UX Designer</small>
                            </h3>
                            <p class="mt-2">Design at Webpixels, creator of Boomerang.</p>
                            <a href="https://instagram.com/extrabright" target="_blank" class="btn btn-sm btn-primary">View
                                on Instagram</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card">
                        <img src="/image/project/front/prv/team-3.jpg"
                             class="card-img-top">
                        <div class="card-body text-center">
                            <h3 class="heading h5 mb-1">
                                <span class="d-block">Cliff Simon</span>
                                <small class="text-muted">Front-End Developer</small>
                            </h3>
                            <p class="mt-2">Clean code developer, creator of Boomerang</p>
                            <a href="https://instagram.com/extrabright" target="_blank" class="btn btn-sm btn-primary">View
                                on Instagram</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice">
        <div class="container">
            <div class="mb-md text-center">
                <h3 class="heading h3">The main features of Boomerang UI</h3>
                <div class="fluid-paragraph text-center mt-4">
                    <p class="lead lh-180">You get all Bootstrap components fully customized. Besides, you receive
                        another 5 plugins out of the box and ready to use. <a
                                href="../../../../../../../html-cartoon/基于BootStrap的UI主题/docs/plugins.html">See the
                            complete list</a></p>
                </div>
            </div>
            <div class="row-wrapper">
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-md-6">
                        <div class="card bg-primary">
                            <div class="card-body py-5">
                                <div class="d-flex align-items-start">
                                    <div class="icon text-primary">
                                        <i class="fab fa-twitter text-white"></i>
                                    </div>
                                    <div class="icon-text">
                                        <h3 class="heading text-white h4">Latest Bootstrap framework
                                            <small>(v4.0.0)</small></h3>
                                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body py-5">
                                <div class="d-flex align-items-start">
                                    <div class="icon text-primary">
                                        <i class="fab fa-sass"></i>
                                    </div>
                                    <div class="icon-text">
                                        <h3 class="heading h4">Built with Sass <small>(included)</small></h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-md-6">
                        <div class="card bg-primary">
                            <div class="card-body py-5">
                                <div class="d-flex align-items-start">
                                    <div class="icon text-primary">
                                        <i class="fas fa-th-large text-white"></i>
                                    </div>
                                    <div class="icon-text">
                                        <h3 class="heading text-white h4">50 customized components</h3>
                                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body py-5">
                                <div class="d-flex align-items-start">
                                    <div class="icon text-primary">
                                        <i class="fas fa-tint"></i>
                                    </div>
                                    <div class="icon-text">
                                        <h3 class="heading h4">Extended color palette</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice slice-lg bg-cover bg-size--cover"
             style="background: url('/image/project/front/backgrounds/img-2.jpg') center center;">
        <div class="mask bg-dark alpha-7"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 ml-lg-auto">
                    <div class="card py-5 px-4 z-depth-3">
                        <div class="card-body">
                            <h2 class="heading h2">
                                <strong>Design</strong> is thinking made visual.
                            </h2>
                            <p class="lead lh-180 mt-4">
                                Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
                                ut labore et dolore magna. Ut enim ad minim veniam quis nostrud exercitation.
                            </p>
                            <div class="btn-container mt-5">
                                <a href="#" class="btn btn-lg btn-primary px-5">Our mission</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice slice-lg" data-delimiter="1">
        <div class="container">
            <div class="mb-md text-center">
                <h3 class="heading h3">Complete list of included features</h3>
                <div class="fluid-paragraph text-center mt-4">
                    <p class="lead lh-180">You get all Bootstrap components fully customized. Besides, you receive
                        another 5 plugins out of the box and ready to use.</p>
                </div>
            </div>
            <div class="row-wrapper">
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-expand"></i>
                            </div>
                            <h5 class="heading h5">Responsive design</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-code"></i>
                            </div>
                            <h5 class="heading h5">Clever markup</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-question-circle"></i>
                            </div>
                            <h5 class="heading h5">Technical support</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                </div>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <h5 class="heading h4">5 page examples</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-puzzle-piece"></i>
                            </div>
                            <h5 class="heading h4">5 customized plugins</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-th"></i>
                            </div>
                            <h5 class="heading h4">50+ components</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                </div>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-tint"></i>
                            </div>
                            <h5 class="heading h4">Unlimited colors</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-font"></i>
                            </div>
                            <h5 class="heading h4">Custom fonts</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fab fa-sass"></i>
                            </div>
                            <h5 class="heading h4">Enhanced forms</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                </div>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fab fa-twitter"></i>
                            </div>
                            <h5 class="heading h4">Bootstrap 4</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-moon"></i>
                            </div>
                            <h5 class="heading h4">Font Awesome 5</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fab fa-sass"></i>
                            </div>
                            <h5 class="heading h4">Built with Sass</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                </div>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-caret-square-down"></i>
                            </div>
                            <h5 class="heading h4">Selectpicker</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-tags"></i>
                            </div>
                            <h5 class="heading h4">Tags input</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-keyboard"></i>
                            </div>
                            <h5 class="heading h4">Input masks</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                </div>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fas fa-sliders-h"></i>
                            </div>
                            <h5 class="heading h4">Range sliders</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="">
                            <div class="icon text-primary mb-3">
                                <i class="fab fa-css3-alt"></i>
                            </div>
                            <h5 class="heading h4">CSS animations</h5>
                            <p>Some quick example text to build on the card title and make up the bulk of the card's
                                content.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice slice-lg">
        <div class="container">
            <div class="mb-md text-center">
                <h3 class="heading h3">Free updates and support</h3>
            </div>
            <div class="row cols-xs-space cols-sm-space cols-md-space">
                <div class="col-lg-4">
                    <div class="card border-0">
                        <img class="rounded z-depth-3 img-fluid"
                             src="/image/project/front/prv/img-3-800x600.jpg"
                             alt="Image description">
                        <div class="pt-4">
                            <h5 class="card-title">Free updates</h5>
                            <p class="card-text">Each theme comes with updates for the life of the theme. This means
                                you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card border-0">
                        <img class="rounded z-depth-3 img-fluid"
                             src="/image/project/front/prv/img-2-800x600.jpg"
                             alt="Image description">
                        <div class="pt-4">
                            <h5 class="card-title">Licenses</h5>
                            <p class="card-text">All our themes have three simple licenses. Free, Multiple and Exteneded
                                Use license are availabled and you can learn more <a href="#">here</a>.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card border-0">
                        <img class="rounded z-depth-3 img-fluid"
                             src="/image/project/front/prv/img-1-800x600.jpg"
                             alt="Image description">
                        <div class="pt-4">
                            <h5 class="card-title">Technical support</h5>
                            <p class="card-text">We're here to help with your Boomerang UI questions. Shoot us an email
                                at support@webpixels.io and we'll get back to you ASAP.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!-- 页脚 -->
<footer class="pt-5 pb-3 footer  footer-dark bg-tertiary">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-4">
                <div class="pr-lg-5">
                    <h1 class="heading h6 text-uppercase font-weight-700 mb-3"><strong>关于我</strong></h1>
                    <p>现在是2023年4月 Kit built on top of the well known Bootstrap 4 Framework. This
                        theme was designed as its own extended version of Bootstrap with multiple functionalities and
                        controls added, extended color palette and beautiful typography.</p>
                </div>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">Features</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Cool stuff</a></li>
                    <li><a class="text-muted" href="#">Random feature</a></li>
                    <li><a class="text-muted" href="#">Team feature</a></li>
                    <li><a class="text-muted" href="#">Stuff for developers</a></li>
                    <li><a class="text-muted" href="#">Another one</a></li>
                    <li><a class="text-muted" href="#">Last time</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">Solutions</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Resource</a></li>
                    <li><a class="text-muted" href="#">Resource name</a></li>
                    <li><a class="text-muted" href="#">Another resource</a></li>
                    <li><a class="text-muted" href="#">Final resource</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">Resources</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Business</a></li>
                    <li><a class="text-muted" href="#">Education</a></li>
                    <li><a class="text-muted" href="#">Government</a></li>
                    <li><a class="text-muted" href="#">Gaming</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">About</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Team</a></li>
                    <li><a class="text-muted" href="#">Locations</a></li>
                    <li><a class="text-muted" href="#">Privacy</a></li>
                    <li><a class="text-muted" href="#">Terms</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="d-flex align-items-center">
          <span class="">
            &copy; 2023 <a href="https://www.zrkizzy.com/" class="footer-link" target="_blank">世纪末的架构师</a>
          </span>
            <ul class="nav ml-lg-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i
                            class="fab fa-instagram"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i
                            class="fab fa-facebook"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i
                            class="fab fa-github"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i
                            class="fab fa-dribbble"></i></a>
                </li>
            </ul>
        </div>
    </div>
</footer>
<!-- Core -->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<script src="/js/fontawesome-all.min.js" defer></script>
<!-- Page plugins -->
<script src="/js/bootstrap-select.min.js"></script>
<script src="/js/bootstrap-tagsinput.min.js"></script>
<script src="/js/input-mask.min.js"></script>
<script src="/js/nouislider.min.js"></script>
<script src="/js/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="/js/theme.js"></script>

<script>
    /**
     * 前往对应秒杀商品页面
     */
    function toDetail() {
        window.location.href = "/produce/goodsDetail.htm?goodsId=1638346946764603392";
    }
</script>
</body>
</html>